<!-- <style>
    body {
        padding-top: 0px;
    }
</style>
 -->
<section>
    <div class="form-inline">
        <label for="sid" class="col-sm-2 control-label" translate lib="web">name</label>
        <div class="col-sm-4">
            <input ng-model="ctrl.model.name" class="form-control input-md" ng-disabled="ctrl.loading==true" />
            <button ng-click="ctrl.Save()" type="button" ng-disabled="ctrl.loading==true" class="btn btn-success "
                translate lib="web">save</button>
        </div>
    </div>
    <!-- <div class="form-inline">
        <label for="sid" class="col-sm-2 control-label" translate lib="web">fbeditor</label>
        <div class="col-sm-4">
            <input type="checkbox" ng-model="ctrl.model.fbeditor" class="input-md" ng-change="ctrl.renderform()"
                ng-disabled="ctrl.loading==true" />
        </div>
    </div> -->
    <div class="form-inline" ng-show="ctrl.model.fbeditor!=true">
        <label for="sid" class="col-sm-2 control-label" translate lib="web">formtype</label>
        <div class="col-sm-4">
            <select ng-model="ctrl.model.formData.display"  class="input-md" ng-change="ctrl.renderform()"
            ng-disabled="ctrl.loading==true">
                <option>form</option>
                <option>wizard</option>
                <!-- <option>pdf</option> -->
            </select>
        </div>
    </div>
</section>
<div id="fb-editor" ng-show="ctrl.model.fbeditor==true">
</div>
<!-- <div ng-show="ctrl.model.fbeditor!=true">
    <div class="form-inline">
        <label for="sid" class="col-sm-2 control-label" translate lib="web">Wizard</label>
        <div class="col-sm-4">
            <input type="checkbox" ng-model="ctrl.model.wizard" class="input-md" ng-change="ctrl.renderform()"
                ng-disabled="ctrl.loading==true" />
        </div>
    </div>
</div> -->

<link rel='stylesheet' href='bootstrap.css'>


<style>
    .dark-mode .formio-dialog-content {
        background-color: var(--dm-card-bg-color) !important;
    }


    .dark-mode .formio-dialog {
        color: unset !important;
    }

    .dark-mode .table {
        color: unset !important;
    }

    .dark-mode .ace_editor {
        background-color: var(--dm-card-bg-color) !important;
    }

    .dark-mode .ace_gutter {
        background-color: var(--dm-card-bg-color) !important;
        color: unset !important;
    }

    .dark-mode .ace-xcode {
        color: unset !important;
    }

    .dark-mode .choices__inner {
        background-color: unset !important;
    }

    .dark-mode .choices__input {
        background-color: unset !important;
    }

    .dark-mode .list-group-item {
        background-color: unset !important;
    }


    /* .formio-dialog-content {
        background: unset !important;
    } */

    /* .formbuilder {
        min-width: 900px;
    } */

    /* .builder-sidebar {
        width: 130px;
    } */

    .builder-group-button {
        text-align: left !important;
    }

    .builder-sidebar_scroll {
        position: sticky !important;
        top: 15px !important;
    }

    .builder-sidebar {
        width: 130px !important;
    }

    .form-builder-panel {
        margin: unset !important;
        padding: unset !important;
    }
    
    .form-builder-panel .formcomponent {
    line-height: 2rem !important;
    margin-top: 2px !important;
    padding-left: 0.5rem !important;
    }

    .form-builder-panel .btn {
        padding-left: 1rem !important;
        padding-bottom: 2rem !important;
    }
    .dark-mode .bg-light {
    background-color: #333 !important;
    }
    
</style>

<p>
    <hr>
</p>
<div ng-show="ctrl.errormessage != ''"" class=" alert alert-danger" role="alert">{{ctrl.errormessage}}</div>
<div id="builder" ng-show="ctrl.model.fbeditor==false">
</div>
